<template>
  <div>
    <el-card class="search-card">
      <BasicTableForm
        ref="formData"
        :formColumns="FORM_ITEM_LIST"
        :dataSource="formData"
        :defaultExpandStatus="false"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
        :colNumOfRow="4"
      />
    </el-card>
    <el-card class="table-card">
      <basic-table
        :showSelectCol="false"
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :tableHeight="500"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      >
        <div slot="content_context">
          <el-button
            v-if="showBtn('导出') && supplierExportConfig.kpi"
            size="mini"
            type="primary"
            @click="handleExport"
            >导出</el-button
          >
        </div>
      </basic-table>
    </el-card>
    <!-- 导出 -->
    <ExportDialog
      :visible.sync="visible"
      :exportInfo='exportInfo'
      :total='pagination.total'
    />
  </div>
</template>
<script>
import BasicTableForm from '@/components/supplier/BasicForm';
import BasicTable from '@/components/supplier/BasicTable';
import ExportDialog from '@supplier/components/ExportDialog';
import { FORM_ITEM_LIST, TABLE_COLUMNS } from './constants';
import BasicPage from '@/mixins/supplier/basicPage';
import Dict from '@/mixins/supplier/dict';
import { setAuthBtnId } from '@/utils/bizUtils';
import {
  querySupplierProductDeliveryListService,
  exportProductDeliveryService
} from '@api/supplier/kpiManagement';

export default {
  mixins: [ BasicPage, Dict ], // 分页数据及方法 表单基础方法
  components: {
    BasicTableForm,
    BasicTable,
    ExportDialog
  },
  data () {
    return {
      FORM_ITEM_LIST,
      formData: {
        month: '',
        supplierCode: '',
        supplierName: '',
        supplierType: null,
        managementAreaId: '',
        belongDepartmentId: null,
        cooperativeClassify: null,
        businessContactName: '',
      },
      visible: false,
      exportInfo: {}
    };
  },
  created () {
    this.tableInfo.columns = TABLE_COLUMNS
    this.getTableData();
  },
  methods: {
    getSearchParams () {
      const [monthStart, monthEnd] = this.formData.month || [];
      return {
        ...this.formData,
        ...this.pagination,
        monthStart,
        monthEnd
      }
    },
    // 获取表格数据
    async getTableData () {
      setAuthBtnId()
      const res = await querySupplierProductDeliveryListService(this.getSearchParams(), state => { this.tableInfo.loading = state })
      if (res) {
        const { records, total } = res.result;
        this.tableInfo.list = records;
        this.pagination.total = total;
      }
    },
    // 导出
    async handleExport () {
      this.visible = true;
      this.exportInfo = {
        service: exportProductDeliveryService,
        excelTitle: '供应商产品交付能力表',
        params: this.getSearchParams(),
      }
    },
  }
};
</script>
